<template>
  <div class="swiper-wrap-box">
    <ul class="wrap-swiper">
      <!--当前点击图片的id 1 -->
      <li
        :class="{ activetab: num == index }"
        v-for="(item, index) in imgs"
        :key="index"
        @click="tabSmall(item.id, index)"
      >
        <img :src="item.imageSmall" alt="" />
      </li>
    </ul>
    <el-carousel
      arrow="never"
      indicator-position="none"
      :height="height"
      class="el"
      ref="carousel"
      @change="carousel"
      v-if="height"
    >
      <el-carousel-item v-for="(item, index) in imgs" :key="index">
        <img class="swiper-img" :src="item.image" alt="" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: "",
      imgs: [],
      height: 0,
      width: 0,
    };
  },
  methods: {
    carousel(e) {
      this.num = e;
    },

    tabSmall(id, index) {
      this.num = id - 1;
      this.$refs.carousel.setActiveItem(index);
    },
  },

  mounted() {
    this.$http.get("/swiper").then((result) => {
      //result.data结果是对象  result.data.data才是需要的数组数据
      this.imgs = result.data.data;
      // console.log(this.imgs);
    });

    // 初始化图片宽高
    this.width = window.innerWidth;
    this.height = `${(this.width / 1920) * 640}px`;

    // 窗口改变尺寸时触发事件
    window.onresize = () => {
      if (window.innerWidth < 1200) return;
      this.width = window.innerWidth;
      this.height = `${(this.width / 1920) * 640}px`;
    };
  },
};
</script>


<style lang="scss" scoped>

.swiper-wrap-box {
  position: relative;
  .wrap-swiper {
    //轮播图按钮
    width: 110px;
    height: 350px;
    position: absolute;
    right: 40px;
    top: 45%;
    margin-top: -166px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    li {
      box-sizing: border-box;
      list-style: none;
      width: 110px;
      height: 62px;
      overflow: hidden;
      // background: chartreuse;
      > img {
        width: 100%;
      }
    }
    .activetab {
      border: 3px solid #f7ab07;
      box-sizing: border-box;
    }
  }
  //轮播图
  .el {
    width: 100%;
    .swiper-img {
      display: block;
      width: 100%;
    }
  }
}
</style>